<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color: #7800BE;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color: #666;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			企业电子账户
			<i class="ri-arrow-right-s-line" style="color: #666;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			申请电子账户
		</view>
		<view>
			<view class="bkk">
				<view class="bl b20">
					<view class="bc">
						<view class="bc" style="margin-bottom: 30px;">
							<i class="ri-user-3-fill" style="color: #7800BE;font-size:30px;"></i>
							<!-- <i-icon size="30px" color="#7800BE" name="user-3-fill"></i-icon> -->
							<text style="font-size: 28px;">创建企业信息</text>
						</view>
					</view>
				</view>
				<view class="">
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;">公司名称</view>
						<input type="text" v-model="qyData.corpName" placeholder="公司名称" style="width: 1000px;" />
					</view>
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;">所在地区</view>
						<picker class="" mode="multiSelector" :range="region" range-key="name" :value="regionIndex"
							@change="pickerChange" @columnchange="pickerColumnchange">
							<view :class="{'pbox_hover':regionStr != '请选择省市区'}" v-if="regionStr != '请选择省市区'">
								<view>{{qyData.provinceName2}}{{qyData.cityName2}}</view>
							</view>
							<view v-else>
								<select>
									<option>{{regionStr}}</option>
								</select>
							</view>
						</picker>
					</view>
					<view class="b10 bk bc">
						<view class="r30" style="width: 150px;">详细地址</view>
						<input type="text" v-model="qyData.address" placeholder="详细地址" style="width:1000px;" />
					</view>
					<view class="bk bc b10">
						<view class="r30" style="width: 150px;">统一社会信用代码</view>
						<input type="text" v-model="qyData.busLicNo" placeholder="统一社会信用代码" style="width:500px;" />
					</view>
				</view>
				<view class="bc">
					<view class="r30" style="width: 150px;">营业执照有效期</view>
					<view class="bc r10 sjk">
						<uni-datetime-picker type="date" placeholder="开始日期" @change="timestartDate" class="r10" />
						<uni-datetime-picker type="date" placeholder="结束日期" @change="timeendDate" />
					</view>
					<view>
						<checkbox-group @change="checkboxChange('busLicEctype')" style="display:inline;">
							<checkbox :checked="state2"></checkbox>
						</checkbox-group>长期
					</view>
				</view>
				<view class="bc" style="margin-top: 30px;">
					<view class="r30" style="width: 150px;">
						<view>营业执照副本</view>
						<view>（{{imgList.length}}/1）</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index"
								@tap="ChooseImage('busLicEctype')" :data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage('busLicEctype')" v-if="imgList.length<1">
								<image src="/static/bfyyzz.png" mode='widthFix'></image>
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<hr>
				<view class="bl b20">
					<view class="bc">
						<view class="bc" style="margin-bottom: 30px;">
							<i class="ri-user-3-fill" style="color: #7800BE;font-size:30px;"></i>
							<!-- <i-icon size="30px" color="#7800BE" name="user-3-fill"></i-icon> -->
							<text style="font-size: 28px;">法人信息</text>
						</view>
					</view>
				</view>
				<view class="">
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;">法人名称</view>
						<input type="text" v-model="qyData.legalPerName" maxlength="10" placeholder="法人名称" />
					</view>
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;">法人联系方式</view>
						<input type="text" v-model="qyData.mobile" maxlength="11" placeholder="法人联系方式" />
					</view>
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;">法人身份证号</view>
						<input type="text" v-model="qyData.legalPerNo" maxlength="20" placeholder="法人身份证号"
							style="width: 500px;" />
					</view>
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;">法人邮箱</view>
						<input type="text" v-model="qyData.transactorEmAddress" placeholder="法人邮箱" />
					</view>
				</view>
				<view class="bc">
					<view class="r30" style="width: 150px;">法人身份证有效期</view>
					<view class="bc r30 sjk">
						<uni-datetime-picker type="date" placeholder="开始日期" @change="timelegalPerStartDate"
							class="r10" />
						<uni-datetime-picker type="date" placeholder="结束日期" @change="timelegalPerEndDate" />
					</view>
					<view>
						<checkbox-group @change="checkboxChange('natEmbPage')" style="display:inline;">
							<checkbox :checked="state3"></checkbox>
						</checkbox-group>长期
					</view>
				</view>
				<view class="bc" style="margin-top: 30px;">
					<view class="r30" style="width: 150px;">
						<view class="">
							法人身份证信息面
						</view>
						<view class="action">
							{{imgList2.length}}/1
						</view>
					</view>
					<view class="cu-form-group r30">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList2" :key="index"
								@tap="ChooseImage('perInfoPage')" :data-url="imgList2[index]">
								<image :src="imgList2[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage('perInfoPage')" v-if="imgList2.length<1">
								<image src="/static/sfzr.png" mode='widthFix'></image>
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="r30">
						<view class="">
							法人身份证国徽面
						</view>
						<view class="action">
							{{imgList3.length}}/1
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList3" :key="index"
								@tap="ChooseImage('natEmbPage')" :data-url="imgList3[index]">
								<image :src="imgList3[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg3" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage('natEmbPage')" v-if="imgList3.length<1">
								<image src="/static/sfzg.png" mode='widthFix'></image>
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<hr>
				<view class="">
					<view class="bc" style="margin-bottom:30px ;">
						<view class="bc r30">
							<i class="ri-bank-card-fill" style="color: #7800BE;font-size:30px;"></i>
							<!-- <i-icon size="30px" color="#7800BE" name="bank-card-fill"></i-icon> -->
							<text style="font-size: 28px;">绑定银行卡</text>
						</view>
						<view class="bc red" style="font-size: 12px;">
							<i class="ri-information-fill" style="color: #f73164;font-size:20px;"></i>
							<!-- <i-icon size="20px" color="#f73164" name="information-fill"></i-icon> -->
							用于提现时使用
						</view>
					</view>
					<view class="">
						<view class="bk b10 bc">
							<view class="r30" style="width: 150px;">开户行</view>
							<input type="text" v-model="qyData.bankName" placeholder="开户行" @click="showDrawer"
								style="width:500px;" />
							<uni-drawer ref="showRight" mode="right" :mask-click="true">
								<scroll-view style="height: 100%;" scroll-y="true">
									<view v-for="item in array" :key="item" @click="getBankname(item)">{{ item }}</view>
								</scroll-view>
							</uni-drawer>
						</view>
						<view class="bk b10 bc">
							<view class="r30" style="width: 150px;">所属区域</view>
							<picker class="" mode="multiSelector" :range="region" range-key="name" :value="regionIndex"
								@change="pickerChange2" @columnchange="pickerColumnchange">
								<view class="bc">
									<view class="pbox" :class="{'pbox_hover':regionStr2 != '请选择省市区'}"
										v-if="regionStr2 != '请选择省市区'">
										<view>{{qyData.provinceName}}{{qyData.cityName}}</view>
									</view>
									<view v-else>
										<select>
											<option>{{regionStr2}}</option>
										</select>
									</view>
								</view>
							</picker>
						</view>
						<view class="bc">
							<view class="r30" style="width: 150px;">开户支行名称</view>
							<view class="bc">
								<input class="r10" type="text" v-model="qyData.bankBranch" placeholder="输入支行关键字进行搜索"
									style="width:500px;" /><button @click="seek()">搜索</button>
							</view>
							<uni-drawer ref="showLeft" mode="right" :mask-click="true">
								<scroll-view scroll-y="true">
									<view v-for="item in showArray" :key="item" @click="getBankBranch(item)"
										style="width: 500rpx;">{{ item }}</view>
								</scroll-view>
							</uni-drawer>
						</view>
						<view class="bk bc b10">
							<view class="r30" style="width: 150px;">银行卡号</view>
							<input type="text" v-model="qyData.acctNo" maxlength="30" placeholder="银行卡号"
								style="width:500px;" />
						</view>
						<view class="bk bc b10">
							<view class="r30" style="width: 150px;">基本存款账户编号</view>
							<input type="text" v-model="qyData.openLicCertNo" placeholder="基本存款账户编号"
								style="width:500px;" />
						</view>
					</view>
				</view>
				<hr>
				<view class="">
					<view class="bl b20">
						<view class="bc" style="margin-bottom: 30px;">
							<i class="ri-bank-card-fill" style="color: #7800BE;font-size:30px;"></i>
							<!-- <i-icon size="30px" color="#7800BE" name="bank-card-fill"></i-icon> -->
							<text style="font-size: 28px;">经办人信息</text>
						</view>
					</view>
					<view class="bk bc  b10">
						<view class="r30" style="width: 150px;">经办人姓名</view>
						<input type="text" v-model="qyData.transactorName" placeholder="经办人姓名" />
					</view>
					<view class="bk bc b10">
						<view class="r30" style="width: 150px;">经办人身份证号</view>
						<input type="text" v-model="qyData.transactorId" maxlength="30" placeholder="经办人身份证号"
							style="width: 400px;" />
					</view>
					<view class="bk bc b10">
						<view class="r30" style="width: 150px;">经办人手机号</view>
						<input class="r30" type="text" v-model="qyData.transactorPhNo" maxlength="11"
							placeholder="经办人手机号" />
						<button type="default" @click="getOpenCode()">获取验证码</button>
					</view>
					<view class="bl bc b10">
						<view class="bk bc">
							<view class="r30" style="width: 150px;">短信验证码</view>
							<input type="text" v-model="messageCode" maxlength="6" placeholder="短信验证码" />
						</view>

					</view>
					<view class="bc">
						<view class="r30" style="width: 150px;">经办人身份证有效期</view>
						<view class="bc sjk r10">
							<uni-datetime-picker type="date" placeholder="开始日期" @change="timetransactorStartDate"
								class="r10" />
							<uni-datetime-picker type="date" placeholder="结束日期" @change="timetransactorEndDate" />
						</view>
						<checkbox-group @change="checkboxChange('transactorInfoPage')" style="display:inline;">
							<checkbox :checked="state4"></checkbox>
						</checkbox-group>长期
					</view>
				</view>

				<view class="bc" style="margin-top: 30px;">
					<view class="r30" style="width: 150px;">
						<view class="">
							经办人身份证信息面
						</view>
						<view class="action">
							{{imgList4.length}}/1
						</view>
					</view>
					<view class="cu-form-group r30">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList4" :key="index"
								@tap="ChooseImage('transactorInfoPage')" :data-url="imgList4[index]">
								<image :src="imgList4[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg4" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage('transactorInfoPage')" v-if="imgList4.length<1">
								<image src="/static/sfzr.png" mode='widthFix'></image>
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>

					<view class="cu-bar bg-white margin-top">
						<view class="r30">
							经办人身份证国徽面
						</view>
						<view class="action">
							{{imgList5.length}}/1
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList5" :key="index"
								@tap="ChooseImage('transactorEmbPage')" :data-url="imgList5[index]">
								<image :src="imgList5[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg5" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage('transactorEmbPage')" v-if="imgList5.length<1">
								<image src="/static/sfzg.png" mode='widthFix'></image>
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<view class="b30">
					<view class="bk b10 bc">
						<view class="r30" style="width: 150px;"></view>
						<button style="margin-top: 30px;margin-bottom: 20px;" @click="toKtqb()">确认并提交</button>
					</view>
					<view>
						<view class="bk b10 bc">
							<view class="r30" style="width: 150px;"></view>
							<label @click="state=!state" class="bc">
								<checkbox :value="temp" /><text>
									<navigator url="../admin/xy">阅读并同意《武汉众邦银行E账通平台子账户服务协议》</navigator>
								</text>
							</label>
						</view>
					</view>
				</view>
				<!-- <button @click="open = 1">弹出</button> -->
				<view v-if="open==1" class="p-tkb">
					<view class="p-tkh"></view>
					<view class="p-tk" style="width: 300px; height: 300px;">
						<view class="tb">
							<view class="titem">
								<i class="ri-add-circle-fill" style="color: #7800BE;font-size:20px;"></i>
								<!-- <i-icon size="20upx" color="#7800BE" name="add-circle-fill" class="r10"></i-icon> -->
								设置交易密码
							</view>
							<i class="ri-close-circle-fill" style="color: #f73164;font-size:20px;" @click="open=false"></i>
							<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="open=false"></i-icon> -->
						</view>
						<view class="com">
							<view class="li bc">
								<view class="wz">交易密码</view>
								<view class="nr"><input type="password" v-model="password"></view>
							</view>
							<view class="li bc">
								<view class="wz">确认交易密码</view>
								<view class="nr"><input type="password" v-model="passwords"></view>
							</view>
							<view class="bc" style="margin-left: 90px;">
								<button type="button" @click="addTwoData()" style="width: 100px;">
									<i class="ri-arrow-right-s-line" style="color: #fff;font-size:14px;"></i>
									<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
									确认
								</button>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import region from '../../components/k-region/pca-code.json';
	import lvSelect from '../../components/lv-select/lv-select.vue'
	export default {
		components: {
			lvSelect
		},
		data() {
			return {
				accState: 1,
				agree: false,
				tttc: false,
				temp: '',
				// 原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],

				// 省市区字符串
				regionStr: '请选择省市区',
				// 省市区字符串
				regionStr2: '请选择省市区',

				accPass: '', //交易密码
				qyData: {
					corpName: '', //企业名称
					busLicNo: '', //营业执照编号
					legalPerName: '', //法人姓名
					legalPerNo: '', //法人身份证号
					mobile: '', //法人手机号
					cerNo: '', //身份证号
					bankName: '', //银行名称
					bankAccName: '', //银行开户名
					acctNo: '', //银行卡号
					relBankNo: '', //联行号（搜索得）
					address: '', //注册地址
					legalPerStartDate: '', //法人证件有效期开始日期
					legalPerEndDate: '', //法人证件有效期结束日期
					busLicEctypeUrl: '', //营业执照图像url
					perInfoPageUrl: '', //法人证件图像url
					natEmbPageUrl: '', //法人证件国徽页图像url
					transactorInfoPageUrl: '', //经办人证件图像url
					transactorEmbPageUrl: '', //经办人证件国徽页图像url
					bankBranch: '', //支行名称
					cerType: '4', //证件类型 3机构代码,4营业执照
					foreignSign: '0', //是否外籍
					corpCerType: '1', //企业证件类型
					cityName: '', //开户银行所在地市名称
					cityName2: '', //企业所在地地市名称
					legalPerMobile: '', //法人证件联系方式
					transactorEmAddress: '', //法人邮箱
					openLicCertNo: '', //开户许可证核准号或基本存款账户编号
					openLicCertUrl: '', //开户许可证url
					orgCodeCertUrl: '', //组织机构代码证url
					provinceName: '', //开户银行所在省份名称
					provinceName2: '', //企业注册地省份名称
					taxRegCerNo: '', //税务登记号；性质为企业时，必填
					taxRegCertUrl: '', //税务登记证url
					transactorId: '', //经办人身份证号
					transactorName: '', //经办人姓名
					transactorPhNo: '', //经办人手机号
					startDate: '', //营业执照有效期开始日期
					endDate: '', //营业执照有效期结束日期：长期有效的传：长期
					orgStartDate: '', //组织机构代码证有效期开始日期
					orgEndDate: '', //组织机构代码证效期结束日期：长期有效的传：长期
					transactorStartDate: '', //经办人证件有效期开始日期，格式：YYYY-MM-DD
					transactorEndDate: '' //经办人证件有效期结束日期，格式：YYYY-MM-DD，长期有效的传：长期				
				},
				messageCode: '',
				acctNo: '',
				BankArray: [], //支行原数据
				showArray: [], //支行显示数据
				disabled: false,
				open: 0,
				class2: 'btns2',
				timer: 60,
				title: '获取验证码',
				password: '',
				passwords: '',
				state: false,
				state2: false,
				state3: false,
				state4: false,
				array: ["﻿中国工商银行", "中国农业银行", "中国银行", "中国邮政储蓄银行", "中国建设银行", "国家开发银行", "中国进出口银行", "中国农业发展银行", "交通银行", "中信银行",
					"中国光大银行银行", "华夏银行",
					"中国民生银行", "广发银行", "平安银行", "招商银行", "兴业银行", "桂林银行", "广西北部湾银行", "上海浦东发展银行", "北京银行", "天津银行", "河北银行",
					"唐山银行股份", "秦皇岛银行股",
					"邯郸银行", "邢台银行", "保定银行", "张家口银行", "承德银行", "沧州银行", "廊坊银行", "衡水银行", "晋商银行", "大同银行", "阳泉市商业银行", "长治银行",
					"晋城银行", "晋中银行", "内蒙古银行", "包商银行", "乌海银行", "盛京银行", "鄂尔多斯银行", "大连银行", "鞍山银行", "抚顺银行", "本溪市商业银行",
					"丹东银行", "锦州银行", "葫芦岛银行", "营口银行", "营口沿海银行", "阜新银行", "辽阳银行", "盘锦银行", "铁岭银行", "朝阳银行", "吉林银行", "哈尔滨银行",
					"龙江银行", "南京银行", "江苏银行", "苏州银行", "江苏长江商业银行", "杭州银行", "宁波东海银行", "宁波银行", "宁波通商银行", "温州银行", "嘉兴银行",
					"湖州银行", "绍兴银行", "金华银行", "浙江稠州商业银行", "台州银行", "浙江泰隆商业银行", "浙江民泰商业银行", "福建海峡银行", "厦门银行", "泉州银行",
					"江西银行", "九江银行", "赣州银行", "上饶银行", "齐鲁银行", "青岛银行", "齐商银行", "枣庄银行", "东营银行", "烟台银行", "潍坊银行", "济宁银行",
					"泰安银行", "莱商银行", "威海市商业银行", "德州银行股份", "临商银行股份", "日照银行股份", "郑州银行", "中原银行", "洛阳银行", "平顶山银行股",
					"焦作中旅银行", "汉口银行", "湖北银行", "华融湘江银行", "长沙银行", "广州银行", "珠海华润银行", "广东华兴银行", "广东南粤银行", "东莞银行",
					"柳州银行", "海南银行", "成都银行", "重庆银行", "自贡银行", "攀枝花市商业银行", "泸州市商业银", "长城华西银行",
					"绵阳市商业银行", "遂宁银行股份", "乐山市商业银行", "宜宾市商业银", "四川天府银行", "达州市商业银行", "雅安市商业银行", "凉山州商业银行", "贵阳银行",
					"贵州银行", "富滇银行", "曲靖市商业银行", "云南红塔银行", "西藏银行", "西安银行", "长安银行", "兰州银行", "甘肃银行", "青海银行股份", "宁夏银行",
					"石嘴山银行", "乌鲁木齐银行", "昆仑银行", "哈密市商业银行", "库尔勒银行", "新疆汇和银行", "天津滨海农村商业银行", "大连农村商业银行", "无锡农村商业银行",
					"江苏江阴农村商业银行", "江苏江南农村商业银行", "太仓农村商业银行", "江苏昆山农村", "吴江农村商业银行", "江苏常熟农村商业银行", "张家港农村商业银行",
					"广州农村商业银行", "广东顺德农村银行", "海口联合农村银行", "成都农商银行", "重庆农村商业银行", "恒丰银行", "浙商银行", "天津农村商业银行", "渤海银行",
					"徽商银行", "重庆三峡银行", "上海农商银行", "天津金城银行", "上海华瑞银行", "浙江网商银行", "重庆富民银行", "上海银行", "北京农村商业银行",
					"河北省农村商业银行", "山西省农村商业银行", "内蒙古农村商业银行", "辽宁省农村商业银行", "吉林省农村商业银行", "黑龙江农村商业银行", "江苏省农村商业银行",
					"浙江省农村商业银行", "宁波鄞州农村商业银行", "安徽省农村商业银行", "福建省农村商业银行", "江西省农村商业银行", "山东省农村商业银行", "河南省农村商业银行",
					"湖北省农村商业银行", "武汉农村商业银行", "湖南省农村商业银行", "广东省农村信用合作联社", "深圳农村商业银行", "东莞农村商业银行", "广西省农村信用合作联社",
					"海南省农村商业银行", "四川省农村信用合作联社", "贵州省农村信用合作联社", "云南省农村信用合作联社", "陕西省农村商业银行", "甘肃省农村商业银行", "青海省农村信用合作联社",
					"宁夏省农村信用合作联社", "新疆省农村商业银行", "温州民商银行", "深圳前海微众银行", "四川新网银行", "众邦银行",
					"南阳村镇银行股份有限公司"
				],
				bankName: '',
				cerStartDate: '',
				cerEndDate: '',
				imgList: [],
				imgList2: [],
				imgList3: [],
				imgList4: [],
				imgList5: [],
				BranchList: [], //支行数据
				Keyword: '', //搜索支行关键字
				index: 0,
				openInfo: 0,
				/**
				 * 搜索组件
				 */
				loading: false,
				showValue: 'bankBranchName', // 需要显示的数据，必须与infoList中的name对应
				searchValue: '',
				infoList: [],
				infoLists: [{
					bankBranchName: '吕星辰1',
					bankBranchNo: '333'
				}, {
					bankBranchName: '吕星辰2',
					bankBranchNo: '444'
				}, {
					bankBranchName: '吕星辰3',
					bankBranchNo: '321'
				}, {
					bankBranchName: '吕星辰4',
					bankBranchNo: '123'
				}],
				qiyeName: '',
				qiyeId: ''
			}
		},
		methods: {
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			getBankname(item) {
				//console.log(item)
				this.qyData.bankName = item;
				this.$refs.showRight.close();
			},
			/**
			 * 搜索支行
			 */
			seek() {
				let _this = this;
				_this.showArray = []; //清空
				_this.BankArray = []; //清空
				let ZHname = _this.qyData.bankName; //银行名称
				let Keyword = _this.qyData.bankBranch; //关键字
				//校验数据
				if (ZHname == null || ZHname == '') {
					uni.showToast({
						title: '银行名称未选择',
						icon: 'none'
					})
					return;
				}
				if (Keyword == null || Keyword == '') {
					uni.showToast({
						title: '请输入搜索关键字',
						icon: 'none'
					})
					return;
				}
				if (Keyword == ZHname) {
					uni.showToast({
						title: '请搜索准确关键字，如：地方名、街道路名',
						icon: 'none',
						duration: 3000
					})
					return;
				}
				uni.request({
					url: _this.baseURL + "/com/my/uip?bankName=" + ZHname + "&Keyword=" + Keyword,
					header: {
						"token": uni.getStorageSync('token')
					},
					method: 'GET',
					success: function(res) {
						console.log(res)
						if (res.data.success == true) {
							let rData = res.data.data;
							_this.BankArray = rData;
							for (let item in rData) {

								_this.showArray.push(rData[item].bankBranchName)
							}
							console.log(_this.showArray)
							_this.$refs.showLeft.open();
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 3000
							})
						}
					},
					fail: function(err) {
						console.log(err)
						uni.showToast({
							title: err.data.message || err.message,
							icon: 'error',
							duration: 3000
						})
					}
				})
			},
			//选中支行数据
			getBankBranch(item) {
				let _this = this;
				_this.qyData.bankBranch = item;
				for (let i in _this.BankArray) {
					let forName = _this.BankArray[i].bankBranchName;
					if (forName == item) {
						_this.qyData.relBankNo = _this.BankArray[i].bankBranchNo;
					}
				}
				this.$refs.showLeft.close();
			},
			/**
			 * 查询该token是否有添加过开户信息
			 */
			getOpenInfo() {
				let token = uni.getStorageSync('token');
				let tthis = this;
				if (token == null) {
					uni.showToast({
						title: '用户未登录'
					})
					return;
				}
				uni.request({
					url: tthis.baseURL + '/com/find/open',
					method: "POST",
					header: {
						'token': token
					},
					success(res) {
						console.log(res)
						if (res.data.success == true) {
							tthis.qyData = res.data.data;
							let rData = res.data.data;
							tthis.qiyeName = rData.corpName;
							tthis.qiyeId = rData.id;
							tthis.openInfo = 1; //开户信息状态
						} else {
							tthis.openInfo = 0;
							console.log("未添加开户信息")
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err.message,
							icon: 'error'
						})
					}
				})
			},

			ChooseImage(e) { //身份证信息面
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['camera'], //从相册选择
					success: (res) => {
						//预览图片
						if (e == 'busLicEctype') {
							_this.imgList = res.tempFilePaths; //给三证赋值
						}
						if (e == 'perInfoPage') {
							_this.imgList2 = res.tempFilePaths; //给法人信息面赋值
						}
						if (e == 'natEmbPage') {
							_this.imgList3 = res.tempFilePaths; //给法人国徽赋值
						}
						if (e == 'transactorEmbPage') {
							_this.imgList5 = res.tempFilePaths; //给经办人信息赋值
						}
						if (e == 'transactorInfoPage') {
							_this.imgList4 = res.tempFilePaths; //给经办人国徽赋值
						}

						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: this.baseURL + '/com/upload?fileType=' + e,
							header: {
								'token': uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: function(uploadFileRes) {
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									console.log(fileData);
									if (e == 'busLicEctype') {
										_this.qyData.busLicEctypeUrl = fileData.data
											.fileId; //给三证赋值
										_this.qyData.taxRegCertUrl = fileData.data.fileId; //给三证赋值
										_this.qyData.openLicCertUrl = fileData.data.fileId; //给三证赋值
										_this.qyData.orgCodeCertUrl = fileData.data.fileId; //给三证赋值
									}
									if (e == 'perInfoPage') {
										_this.qyData.perInfoPageUrl = fileData.data
											.fileId; //给法人信息面赋值
									}
									if (e == 'natEmbPage') {
										_this.qyData.natEmbPageUrl = fileData.data
											.fileId; //给法人国徽赋值
									}
									if (e == 'transactorEmbPage') {
										_this.qyData.transactorEmbPageUrl = fileData.data
											.fileId; //给经办人信息赋值
									}
									if (e == 'transactorInfoPage') {
										_this.qyData.transactorInfoPageUrl = fileData.data
											.fileId; //给经办人国徽赋值
									}

								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList = [];
								}
							},
							fail: function(err) {
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			/**
			 * 预览图片集
			 * @param {Object} e
			 */
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ViewImage2(e) {
				uni.previewImage({
					urls: this.imgList2,
					current: e.currentTarget.dataset.url
				});
			},
			ViewImage3(e) {
				uni.previewImage({
					urls: this.imgList3,
					current: e.currentTarget.dataset.url
				});
			},
			ViewImage4(e) {
				uni.previewImage({
					urls: this.imgList4,
					current: e.currentTarget.dataset.url
				});
			},
			ViewImage5(e) {
				uni.previewImage({
					urls: this.imgList5,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			//删除
			DelImg2(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList2.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			DelImg3(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList3.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			DelImg4(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList4.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			DelImg5(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList5.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},

			//营业执照有效期
			timestartDate: function(c) {
				this.qyData.startDate = c;
				console.log(this.qyData.startDate)
			},
			timeendDate: function(c) {
				this.state2 = false;
				this.qyData.endDate = c;
				console.log(this.qyData.endDate)
			},
			//法人有效期
			timelegalPerStartDate: function(c) {
				this.qyData.legalPerStartDate = c;
				console.log(this.qyData.legalPerStartDate)
			},
			timelegalPerEndDate: function(c) {
				this.state3 = false;
				this.qyData.legalPerEndDate = c;
				console.log(this.qyData.legalPerEndDate)
			},
			//经办人有效期
			timetransactorEndDate: function(c) {
				this.state4 = false;
				this.qyData.transactorEndDate = c;
				console.log(this.qyData.transactorEndDate)
			},
			timetransactorStartDate: function(c) {
				this.qyData.transactorStartDate = c;
				console.log(this.qyData.transactorStartDate)
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let arrid = e.target.value;
				console.log('选择到的值是：', this.array[arrid])
				this.bankName = this.array[arrid];
				this.index = arrid;
				console.log('bankName的当前值为:' + this.bankName)
			},
			checkboxChange(e) {

				console.log(e)
				if (e == 'busLicEctype') {
					this.state2 = !this.state2;
					this.qyData.endDate = '长期'; //给三证赋值
					this.qyData.orgEndDate = '长期'; //给三证赋值
				}
				if (e == 'natEmbPage') {
					this.state3 = !this.state3;
					this.qyData.legalPerEndDate = '长期'; //给法人国徽赋值
					console.log(this.qyData.legalPerEndDate)
				}
				if (e == 'transactorInfoPage') {
					this.state4 = !this.state4;
					this.qyData.transactorEndDate = '长期'; //给经办人信息赋值
				}
			},

			//获取验证码
			getOpenCode() {
				let userName = this.qyData.transactorName;
				let cerNo = this.qyData.transactorId;
				let phone = this.qyData.transactorPhNo;
				let acctNo = this.qyData.acctNo;
				this.qyData.bankAccName = this.qyData.corpName;
				if (this.qyData.corpName == '') {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.imgList.length == 0) {
					uni.showToast({
						title: '请上传营业执照副本',
						icon: 'none'
					})
					return;
				}
				if (this.imgList2.length == 0) {
					uni.showToast({
						title: '请上传法人身份证信息面',
						icon: 'none'
					})
					return;
				}
				if (this.imgList3.length == 0) {
					uni.showToast({
						title: '请上传法人身份证国徽面',
						icon: 'none'
					})
					return;
				}
				if (this.qyData.provinceName2 == '') {
					uni.showToast({
						title: '企业地址未选择',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.startDate == '' && this.qyData.endDate) {
					uni.showToast({
						title: '请选择营业执照有效期',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.transactorStartDate == '' && this.qyData.transactorEndDate) {
					uni.showToast({
						title: '请选择经办人身份证有效期',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.legalPerStartDate == '' && this.qyData.legalPerEndDate) {
					uni.showToast({
						title: '请选择法人身份证有效期',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.address == '') {
					uni.showToast({
						title: '请输入纤细地址',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.busLicNo == '') {
					uni.showToast({
						title: '请输入统一社会信用码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.legalPerName == '') {
					uni.showToast({
						title: '请输入法人名称',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.mobile == '') {
					uni.showToast({
						title: '请输入法人联系方式',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.legalPerNo == '') {
					uni.showToast({
						title: '请输入法人身份证号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.transactorEmAddress == '') {
					uni.showToast({
						title: '请输入法人邮箱',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.provinceName == '') {
					uni.showToast({
						title: '请选择银行地址',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.bankBranch == '') {
					uni.showToast({
						title: '请输入支行',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.openLicCertNo == '') {
					uni.showToast({
						title: '请输入基本存款账户编号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.transactorPhNo == '') {
					uni.showToast({
						title: '请输入经办人联系方式',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (userName == '') {
					uni.showToast({
						title: '请输入经办人姓名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.bankAccName == '') {
					uni.showToast({
						title: '请输入银行卡开户名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.transactorId == '') {
					uni.showToast({
						title: '请输入经办人身份证号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.qyData.acctNo == '') {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (phone == '' || phone.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (this.timer == 60) {
					this.disabled = true

					let timer1 = setInterval(() => {
						this.timer--;
						this.title = this.timer + '秒后重试'
						if (this.timer == 0) {
							clearInterval(timer1);
							this.timer = 60;
							this.disabled = false
							this.title = '获取验证码'
							return;
						}
					}, 1000);
				}
				uni.request({
					url: this.baseURL + '/gr/get/code?mobile=' + phone + '&cerNo=' + cerNo + '&userName=' +
						userName + '&acctNo=' + acctNo,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					dataType: 'json',
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							uni.showToast({
								title: '发送成功',
								duration: 2000
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},


			/**
			 * 提交开户申请
			 */
			toKtqb() {
				uni.showLoading({})
				let tttdata = this;
				//营业执照日期
				tttdata.qyData.orgStartDate = tttdata.qyData.startDate;
				tttdata.qyData.orgEndDate = tttdata.qyData.endDate;


				//三证
				let toyicode = tttdata.qyData.busLicNo;
				tttdata.qyData.taxRegCerNo = toyicode; //三证合一
				tttdata.qyData.cerNo = toyicode; //营业执照

				//三证合一图
				let urlz3 = tttdata.qyData.busLicEctypeUrl;
				tttdata.qyData.orgCodeCertUrl = urlz3; //机构代码
				tttdata.qyData.taxRegCertUrl = urlz3; //税务登记

				//联系方式
				let pho = tttdata.qyData.mobile;
				tttdata.qyData.legalPerMobile = pho;

				this.userName = tttdata.bankAccName;
				if (this.state == false) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return;
				}
				if (this.qyData.transactorStartDate == '' && this.qyData.transactorEndDate == '') {
					uni.showToast({
						title: '请选择经办人身份证有效期',
						icon: 'none'
					})
					return;
				}
				if (this.imgList4.length == 0) {
					uni.showToast({
						title: '请上传经办人身份证信息面',
						icon: 'none'
					})
					return;
				}
				if (this.imgList5.length == 0) {
					uni.showToast({
						title: '请上传经办人身份证国徽面',
						icon: 'none'
					})
					return;
				}
				if (this.messageCode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				//查看传输数据
				console.log(this.qyData)
				//没有开户信息，调用添加接口
				if (this.openInfo == 0) {
					uni.request({
						url: this.baseURL + '/com/my/add',
						method: 'POST',
						data: this.qyData,
						header: {
							'token': uni.getStorageSync('token')
						},
						dataType: 'json',
						success: (res) => {
							console.log(res);
							uni.hideLoading()
							if (res.data.success == true) {
								uni.showToast({
									title: '提交成功，请设置交易密码',
									duration: 3000,
									icon: "success"
								})
								tttdata.open = 1;
							}
							if (res.data.success == false) {
								uni.showToast({
									title: res.data.message,
									icon: 'error',
									duration: 2000
								})
							}
						},
						fail(err) {
							uni.hideLoading()
							console.log(err)
							uni.showToast({
								title: err,
								icon: 'error',
								duration: 2000
							})
						}
					})
				}
				//有开户信息，调用修改接口
				if (this.openInfo == 1) {

					uni.request({
						url: this.baseURL + '/com/redo/info?corpName=' + tttdata.qiyeName + '&id=' + tttdata
							.qiyeId,
						method: 'POST',
						header: {
							'token': uni.getStorageSync('token')
						},
						data: this.qyData,
						success(res) {
							uni.hideLoading()
							console.log(res)
							if (res.data.success == true) {
								uni.showToast({
									title: '提交成功，请设置交易密码',
									icon: 'success',
									duration: 3000
								})
								tttdata.open = 1;
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'error',
									duration: 2000
								})
							}
						},
						fail(err) {
							uni.hideLoading()
							console.log(err)
							uni.showToast({
								title: err,
								icon: 'error',
								duration: 2000
							})
						}
					})
				}
			},

			/**
			 * 填完交易密码开始开户
			 */
			addTwoData() {
				uni.showLoading({

				})
				if (this.password == '' || this.password == null) {
					uni.showToast({
						title: '请输入交易密码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.passwords == '' || this.passwords == null) {
					uni.showToast({
						title: '请确认您的交易密码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.password != this.passwords) {
					uni.showToast({
						title: '两次密码不相同',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.request({
					url: this.baseURL + '/com/open/acc?busLicNo=' + this.qyData.busLicNo + '&newPass=' + this
						.passwords + '&messsageCode=' + this.messageCode,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading()
						console.log(res);
						if (res.data.success == true) {
							uni.showToast({
								title: '提交成功，审核预计需要两个工作日',
								duration: 3000
							})
							setTimeout(function() {
								uni.reLaunch({
									url: 'account-qy-info'
								})
							}, 3000)

						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
						uni.showToast({
							title: err.message,
							icon: 'error',
							duration: 3000
						})
					}
				})
			},
			/**
			 * 省市区三级联动(企业地址)
			 * @param {Object} e
			 */
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;

				this.qyData.provinceName2 = this.region[0][this.regionIndex[0]].name; //省
				this.qyData.cityName2 = this.region[1][this.regionIndex[1]].name; //市

				//this.qyData.address = this.region[2][this.regionIndex[2]].name;//区
				this.regionStr = this.region[0][this.regionIndex[0]].name + this.region[1][this.regionIndex[1]].name;

				// 组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]].code,
					this.region[
						2][this.regionIndex[2]].code
				]);
			},
			/**
			 * 省市区三级联动(银行地址)
			 * @param {Object} e
			 */
			pickerChange2(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;

				this.qyData.provinceName = this.region[0][this.regionIndex[0]].name; //省
				this.qyData.cityName = this.region[1][this.regionIndex[1]].name; //市

				this.regionStr2 = this.region[0][this.regionIndex[0]].name + this.region[1][this.regionIndex[1]].name;

				// 组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]].code,
					this.region[
						2][this.regionIndex[2]].code
				]);
			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)

				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			},
		},
		created() {
			let provinceArr = [];
			let cityArr = [];

			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			// console.log(provinceArr);
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code) {
					this.regionIndex[2] = index;
				}
			})
			if (this.isRevise) {
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;
				this.regionStr2 = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;
			} else {
				this.regionStr = '请选择省市区';
				this.regionStr2 = '请选择省市区';
			}
		},
		onLoad() {
			this.getOpenInfo();
		}
	}
</script>

<style>
	hr {
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.bk {
		height: 60px;
		line-height: 60px;
	}

	.selectData {
		display: block;
		position: absolute;
		left: 0;
		top: 10px;
		z-index: 899;
		min-width: 300px;
		border: 0px solid #d2d2d2;
		max-height: 300px;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 2px;
		box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
		box-sizing: border-box;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}



	.p-navbox {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 20px;
	}

	.p-nav {
		height: 40px;
	}

	.p-checked {
		color: #7800BE;
		border-bottom: 5px solid #7800BE;
		border-radius: 3px;
	}

	.p-erweima {
		display: flex;
	}

	.p-erweima image {
		display: inline-block;
		width: 180px;
		height: 180px;
	}

	.p-flow-step {
		display: block;
		line-height: 30px;
		margin-left: 10px;
		padding-left: 10px;
		border-left: 1px solid #808080;
	}

	.p-flow-step-no {
		display: inline-block;
		font-size: 12px;
		height: 22px;
		width: 22px;
		line-height: 22px;
		background-color: #7800BE;
		border-radius: 50%;
		text-align: center;
		margin-left: -22px;
		margin-right: 20px;
		color: #FFFFFF;
	}
</style>
